import { Component, Injectable, OnInit, ViewChild } from '@angular/core';

import { BaseDirective } from '../../core/models/base-directive.model';
import { CommonService } from '../../core/services/common.service';
import { GeneralConfig } from '../../core/config/general.config';
import { DateFormatConfig } from '../../core/config/date-format.config';
import { DataGridConfig } from '../../core/config/data-grid.config';
import { DataGridOption } from '../../extensions/elements/data-grids/shared/models/data-grid-option.model';
import { DataGridPageChangedEventArg } from '../../extensions/elements/data-grids/shared/models/data-grid-page-changed-event-arg.model';
import { DataGridSelectionChangedEventArg } from '../../extensions/elements/data-grids/shared/models/data-grid-selection-changed-event-arg.model';
import { DataGrid } from '../../extensions/elements/data-grids/shared/interfaces/data-grid.interface';
import { DataTableOption } from '../../extensions/elements/data-tables/shared/models/data-table-option.model';
import { DataTablePageChangedEventArg } from '../../extensions/elements/data-tables/shared/models/data-table-page-changed-event-arg.model';
import { GridLayoutOption } from '../../extensions/elements/grid-layouts/shared/models/grid-layout-option.model';
import { FooService } from '../shared/foo.service';

@Component({
    templateUrl: './detail-view.component.html'
})
export class DetailViewComponent extends BaseDirective implements OnInit {
    @ViewChild('dataGrid', {static: false}) dataGrid: DataGrid;
    dataGridOption: DataGridOption = {};
    dataTableOption: DataTableOption = {};
    gridLayoutOption: GridLayoutOption = {};
    shortDateFormat: string = DateFormatConfig.shortDateFormat;
    data: any;
    gender: any[];
    customFilter: any;

    constructor(
        private fooService: FooService
    ) {
        super();
    }

    ngOnInit(): void {
        super.ngOnInit();

        // this.fooService.get().subscribe(data => {
        //     console.log(`Data recieved: ${data}`);
        // });

        // this.fooService.save().subscribe(data => {
        //     console.log(`Data recieved: ${data}`);
        // });

        // this.fooService.save().subscribe();

        this.customFilter = [
            {
              text: "小于10000",
              value: ["code", "<", 10000]
            },
            {
              text: "10000~30000",
              value: [["code", ">=", 10000], ["code", "<", 30000]]
            },
            {
              text: "30000~60000",
              value: [["code", ">=", 30000], ["code", "<", 60000]]
            },
            {
              text: "60000~90000",
              value: [["code", ">=", 60000], ["code", "<", 90000]]
            },
            {
              text: "大于90000",
              value: ["code", ">=", 90000]
            }
          ];

        this.data = {
            id: 1,
            name: 'Tesla Model 3',
            password: '',
            confirmPassword: '',
            gender: {
                id: 0,
                text: 'Girl'
            },
            age: 18,
            likeBeef: false,
            states: null
        };

        this.gender = [
            {
                id: 0,
                text: 'Girl'
            },
            {
                id: 1,
                text: 'Boy'
            }
        ];

        this.dataGridOption.pageSize = DataGridConfig.pageSize;
        this.dataTableOption.pageSize = DataGridConfig.pageSize;

        this.fooService.loadUser(0, this.dataGridOption.pageSize).subscribe(data => {
            this.dataGridOption.totalRowsCount = data.length;

            // For client side paging testing.
            // this.dataGridOption.dataSource = data;

            // For server side paging testing.
            this.dataGridOption.dataSource = data.slice(0, this.dataGridOption.pageSize);

            this.dataTableOption.totalRowsCount = data.length;

            // For client side paging testing.
            // this.dataTableOption.body = data;

            // For server side paging testing.
            this.dataTableOption.body = data.slice(0, this.dataGridOption.pageSize);

            this.gridLayoutOption.body = data[0];
        });
    }

    getLocale() {
        let locale = sessionStorage.getItem("locale");
        return locale != null ? locale : "zh-CN";
    }

    setLocale(locale) {
        sessionStorage.setItem("locale", locale);
    }

    /**
     * Loads the data from the source when the page index changes.
     * @param e Instance of DataGridPageChangedEventArgument.
     */
    onPageChanged(e: DataGridPageChangedEventArg): void {
        this.fooService.loadUser(e.pageStartIndex, e.pageSize).subscribe(data => {
            this.dataGridOption.totalRowsCount = data.length;
            this.dataGridOption.dataSource = data.slice(e.pageStartIndex, e.pageEndIndex);
        });
    }

    onSelectionChanged(e: DataGridSelectionChangedEventArg): void {
        // console.dir(e);
    }

    /**
     * Loads the data from the source when the page index changes.
     * @param e Instance of DataGridPageChangedEventArgument.
     */
    onTablePageChanged(e: DataTablePageChangedEventArg): void {
        this.fooService.loadUser(e.pageStartIndex, e.pageSize).subscribe(data => {
            this.dataTableOption.totalRowsCount = data.length;
            this.dataTableOption.body = data.slice(e.pageStartIndex, e.pageEndIndex);
        });
    }

    private takeAction(row: any): void {
        console.log('I am taking action on ' + row.id);
        // console.dir(this.dataGrid);
        this.dataGrid.gotoPage(0);
    }
}